<template>
    <div class="dataDiv flex">
        <div class="head flex">
            <div class="left flex">
                <img src="/static/img/data_logo.png" class="logo" onclick="javaScript: location = '/'" />
                <img src="/static/img/resh.png" class="resh" onclick="javaScript: location.reload()" />
            </div>
            <div class="right flex">
                <p></p>
                <b v-if="app.isLogin()">{{ app.getUserInfo().username }}</b>
				<b v-else>请先登录</b>
                <span @click="closeTooltips();hand.show = true;">
					<template v-if="info.filterTime && info.filterTime.length >= 2">
						{{ app.toTime(info.filterTime[0], "MM/DD") }}至{{ app.toTime(info.filterTime[1], "MM/DD") }}数据
					</template>
					<template v-else>未选择时间</template>
					<i class="iconfont icon-xiala"></i>
				</span>
            </div>
        </div>
        <div class="main flex">
            <div class="left flex">
                <div class="commonDataTitle">手机系统分布统计</div>
                <div class="commonSmallTitle flex" style="margin-top: 30px;">
                    <b></b>
                    <span>消费用户情况</span>
                </div>
                <div class="pieDiv flex">
					<div style="width: 100%;height: 160px;flex-direction: column; align-items: center; justify-content: center;" class="flex" v-if="info.data === null">
						<loading></loading>
					</div>
					<template v-else>
						<div class="leftPie"></div>
						<div class="rabit">
						    <div class="item flex">
						        <b style="background:#48bca9;"></b>
						        <span>安卓：</span>
						        <i class="ell" style="color:#48bca9;">{{ info.data ? info.data.pay_device_ratio.android : "-" }}笔</i>
						    </div>
						    <div class="item flex">
						        <b style="background:#fec64b;"></b>
						        <span>苹果：</span>
						        <i class="ell" style="color:#fec64b;">{{ info.data ? info.data.pay_device_ratio.ios : "-" }}笔</i>
						    </div>
						</div>
					</template>
                </div>

                <div class="commonSmallTitle flex" style="margin-top: 40px;">
                    <b></b>
                    <span>注册用户情况</span>
                </div>
                <div class="progress">
                    <div class="proDiv">
                        <div class="active" :style="{ width: `${info.data ? (info.data.register_device_ratio.ios / info.data.register_device_ratio.total * 100).toFixed(2) : 0}%` }"></div>
                    </div>
                    <div class="tar flex">
                        <div class="item flex">
                            <b style="background:#48bca9;"></b>
                            <span>安卓：</span>
                            <i class="ell" style="color:#48bca9;">{{ info.data ? info.data.register_device_ratio.android : "-" }}人</i>
                        </div>
                        <div class="item flex">
                            <b style="background:#fec64b;"></b>
                            <span>苹果：</span>
                            <i class="ell" style="color:#fec64b;">{{ info.data ? info.data.register_device_ratio.ios : "-" }}人</i>
                        </div>
                    </div>
                </div>

                <div class="commonDataTitle" style="margin-top: 30px;">近100条注册记录</div>
                <div class="table_head flex">
                    <div class="item" style="width:0;flex:1;">用户昵称</div>
                    <div class="item" style="width:70px;text-align: right;">方式</div>
                    <div class="item" style="width:70px;text-align: right;">ID</div>
                </div>
                <div class="table_body">
					<div style="height: 100%;flex-direction: column; align-items: center; justify-content: center;" class="flex" v-if="info.data === null">
						<loading></loading>
					</div>
                    <swiper class="swiper" :options="info.swiper.reg_pay_record.option" v-else>
                        <template v-for="(item) in info.data.register_list">
                            <swiper-slide class="body_item flex">
                                <a class="item ell" style="width:0;flex:1;" target="_blank" :href="`/user/detail?id=${item.id}`">
                                    <img :src="item.avatar" style="border-radius: 50%;" />
									{{ item.nickname }}
                                </a>
                                <a class="item ell" style="width:70px;text-align: right;font-size:11px;">{{ item.register_source }}</a>
                                <a class="item ell" style="width:70px;text-align: right;font-size:11px;opacity: 0.8;">{{ item.id }}</a>
                            </swiper-slide>
                        </template>
                    </swiper>
                </div>
            </div>
            <div class="center">
                <div class="centerNum flex">
                    <div class="numLeft flex">
                        <img src="/static/img/data_icon.png" />
                        <span>数据汇总</span>
                    </div>
                    <div class="numRight flex">
                        <div class="item flex" style="width:75px;flex:auto;">
                            <div class="numFlex flex">
                                <b>{{ info.data ? app.castNum(info.data.center_total.profit) : "-" }}</b>
                                <span>元</span>
                            </div>
                            <div class="numText">
                                毛利润
                            </div>
                        </div>
                        <div class="item flex">
                            <div class="numFlex flex">
                                <b>{{ info.data ? app.castNum(info.data.center_total.money_total) : "-" }}</b>
                                <span>元</span>
                            </div>
                            <div class="numText">总流水</div>
                        </div>
                        <div class="item flex">
                            <div class="numFlex flex">
                                <b>{{ info.data ? app.castNum(info.data.center_total.promotion_cost) : "-" }}</b>
                                <span>元</span>
                            </div>
                            <div class="numText">推广消耗</div>
                        </div>
                        <div class="item flex">
                            <div class="numFlex flex">
                                <b>{{ info.data ? app.castNum(info.data.center_total.order_total) : "-" }}</b>
                                <span>笔</span>
                            </div>
                            <div class="numText">付费笔数</div>
                        </div>
                        <div class="item flex">
                            <div class="numFlex flex">
                                <b>{{ info.data ? app.castNum(info.data.center_total.register_total) : "-" }}</b>
                                <span>人</span>
                            </div>
                            <div class="numText">注册人数</div>
                        </div>
                    </div>
                </div>
				<div style="height: 100%;flex-direction: column; align-items: center; justify-content: center;padding-bottom: 110px;" class="flex" v-if="info.data === null">
					<loading></loading>
				</div>
            </div>
            <div class="right flex">
                <div class="commonDataTitle">数据概览</div>
                <div class="textGroup">
                    <div class="item flex">
                        <div class="itemLeft ell">流水前三的地区</div>
                        <div class="itemRight ell">{{ info.data ? (info.data.pay_area_rank.length > 0 ? info.data.pay_area_rank.join("、") : "-") : "-" }}</div>
                    </div>
                    <div class="item flex">
                        <div class="itemLeft ell">注册前三的地区</div>
                        <div class="itemRight ell">{{ info.data ? (info.data.register_area_rank.length > 0 ? info.data.register_area_rank.join("、") : "-") : "-" }}</div>
                    </div>
                    <div class="item flex">
                        <div class="itemLeft ell">人均付费成本</div>
                        <div class="itemRight ell">{{ info.data ? info.data.per_capital_consumption : "-" }}</div>
                    </div>
                    <div class="item flex">
                        <div class="itemLeft ell">流水同比上个周期</div>
                        <div class="itemRight ell" style="color:#ff4011;" v-if="info.data && info.data.total_money_growth > 0">+{{ info.data ? info.data.total_money_growth : "-" }}%</div>
                        <div class="itemRight ell" style="color:#46aa0a;" v-else>{{ info.data ? info.data.total_money_growth : "-" }}%</div>
                    </div>
                    <div class="item flex">
                        <div class="itemLeft ell">上月份投放回本率</div>
                        <div class="itemRight ell" style="color:#ff4011;" v-if="info.data && info.data.last_month_effect >= 100">{{ info.data ? info.data.last_month_effect : "-" }}%</div>
                        <div class="itemRight ell" style="color:#46aa0a;" v-else>{{ info.data ? info.data.last_month_effect : "-" }}%</div>
                    </div>
                </div>

                <div class="commonDataTitle" style="margin-top: 23px;">今日新复购趋势</div>
                <div class="rightLineView">
                    <div class="dropdownView">
                        <el-dropdown @command="info.reBuyType = $event;getReBuyData();">
                            <span class="selectSpan">{{ info.reBuyType === "money" ? "金额" : "笔数" }}<i class="iconfont icon-xiala"></i></span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="money">金额</el-dropdown-item>
                                <el-dropdown-item command="order">笔数</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
					<div style="height: 200px;flex-direction: column; align-items: center; justify-content: center;" class="flex" v-if="!info.echart.rightLineChart">
						<loading></loading>
					</div>
                    <div class="rightLineChart" v-else></div>
                </div>

                <div class="commonDataTitle" style="margin-top: 30px;">近100条订单记录</div>
                <div class="table_head flex">
                    <div class="item" style="width:0;flex:1;">用户昵称</div>
                    <div class="item" style="width:70px;text-align: right;">方式</div>
                    <div class="item" style="width:70px;text-align: right;">金额</div>
                </div>
                <div class="table_body">
					<div style="height: 100%;flex-direction: column; align-items: center; justify-content: center;" class="flex" v-if="info.data === null">
						<loading></loading>
					</div>
                    <swiper class="swiper" :options="info.swiper.reg_pay_record.option" v-else>
						<swiper-slide class="body_item flex" v-for="(item) in info.data.order_list">
							<a class="item ell" style="width:0;flex:1;" target="_blank" :href="`/user/detail?id=${item.id}`">
								<img :src="item.avatar" />
								{{ item.nickname }}
							</a>
							<a class="item ell" style="width:70px;text-align: right;font-size:11px;">{{ item.pay_type }}</a>
							<a class="item ell" style="width:70px;text-align: right;font-size:11px;opacity: 0.8;">{{ item.pay_amount }}</a>
						</swiper-slide>
                    </swiper>
                </div>
            </div>
        </div>
        <div class="maps" ref="maps"></div>
        <el-dialog class="set_admin_el_dialog" title="提示" :visible.sync="hand.show" width="500px">
            <el-form label-position="top">
                <el-form-item label="时间范围">
                    <el-date-picker @change="destroyEchart();getMapData();hand.show = false;" v-model="info.filterTime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" :default-time="['00:00:00', '23:59:59']" style="width:100%;" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    import axios from 'axios';
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
    import 'swiper/css/swiper.min.css';
    import loading from '../../components/loading.vue';
    export default {
        components: { Swiper,  SwiperSlide, loading },
        data() {
            return {
                hand: {
                    show: false,
                    load: { load: false },
                    data: null,
                },
                info: {

                    // 图表
                    echart: {
                        myChart: null, // 地图对象
                        mapData: null, // 地图数据
                        cityCode: "100000", //上级国家代码，若为空则是世界地图

                        leftPieChart: null, // 饼图对象
                        rightLineChart: null, // 新复购趋势
                        toolEcharts: null, // tooltips里面的echarts对象
                    },

                    // 轮播
                    swiper: {
						
                        //近300条注册
                        reg_pay_record: {
                            option: {
                                lastNeedSwiperSpeed: 0,
                                slidesPerView: 'auto',
                                speed: 3000,//匀速时间
                                autoplay: {
                                    delay: 0,
                                    stopOnLastSlide: false,
                                    disableOnInteraction: false,
                                    pauseOnMouseEnter: true,
                                },
                                direction: 'vertical',
                                observer: true,
                                observeParents: true,
                                loop: true,
                            },
                            list: null
                        },

                        //App销量
                        appSell: {
                            option: {
                                lastNeedSwiperSpeed: 0,
                                slidesPerView: 'auto',
                                speed: 3000,//匀速时间
                                autoplay: {
                                    delay: 0,
                                    stopOnLastSlide: false,
                                    disableOnInteraction: false,
                                    pauseOnMouseEnter: true,
                                },
                                direction: 'vertical',
                                observer: true,
                                observeParents: true,
                                loop: true,
                            },
                            list: null
                        },
                    
					},
					
					// 当前时间
					nowTimer: null,
					
					// 近24小时的新复购金额和笔数 money是金额  order是笔数
					reBuyType: "money",
					
					// 当前所筛选的时间
					filterTime: [
						this.app.toTime(new Date(new Date().toLocaleDateString()).getTime(),"YYYY-MM-DD hh:mm:ss"), 
						this.app.toTime(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1, "YYYY-MM-DD hh:mm:ss")
					],
					
					// 基本数据盘
					data: null,
					
				}
            }
        },
        methods: {
			
			// 销毁所有数据
			destroyEchart(){
				this.info.data = null;
				this.info.echart.leftPieChart && this.info.echart.leftPieChart.dispose();
				this.info.echart.myChart && this.info.echart.myChart.dispose();
			},

            // 拿到地图数据
            getMapData() {
                let _this = this;
                axios({ url: `/static/city/china.json`, base_url: "/", }).then(function (res) {
                    _this.info.echart.mapData = res.data;
					_this.app.ajax({
						url: "/admin/BigData/index",
						data: { time: _this.info.filterTime.join(",") },
						success(res){
							_this.info.data = res.data;
							_this.$nextTick(() => _this.initMap());
						}
					});
                }).catch(function (err) {
                    _this.$notify({ title: '提示', message: '城市数据加载失败..', type: 'warning' });
                })
            },

            // 初始化图表
            initMap(type) {
                let _this = this;
				
				// 系统分布饼图
				echarts.init(document.querySelector(".leftPie")).dispose(); // 销毁实例
				_this.info.echart.leftPieChart = echarts.init(document.querySelector(".leftPie"));
				let leftOption = {
				    series: [
				        {
				            radius: ['55%', '95%'],
				            center: ['50%', '50%'],
				            type: 'pie',
				            itemStyle: {normal: {borderWidth: 6,borderColor: '#132728',color: function (params) {let colorList = ["#fec64b","#48bca9"];return colorList[params.dataIndex]}}},
				            labelLine: {normal: {show: false},emphasis: {show: false}},
				            label: {
				                normal: {
				                    show: true,
				                    position: 'center',
				                    color: '#4c4a4a',
				                    formatter: `{total|${_this.info.data.pay_device_ratio.total === 0 ? 0 : (_this.info.data.pay_device_ratio.android / _this.info.data.pay_device_ratio.total * 100).toFixed(2)}%}\n\r{active|安卓占比}`,
				                    rich: {total: {fontSize: 19,fontFamily: "微软雅黑",color: '#FFF'},active: {fontFamily: "微软雅黑",fontSize: 12,color: 'rgba(255,255,255,0.5)',lineHeight: 20}}
				                },
				                emphasis: {show: true}
				            },
				            data: [
								_this.info.data.pay_device_ratio.ios,
								_this.info.data.pay_device_ratio.android
							],
				        }
				    ]
				}
				_this.info.echart.leftPieChart.setOption(leftOption, true);

                // 地图
                echarts.registerMap(_this.info.echart.cityCode, _this.info.echart.mapData);
                echarts.init(document.querySelector(".maps")).dispose(); // 销毁实例
                _this.info.echart.myChart = echarts.init(document.querySelector(".maps"));
				
				// 获取地图最大值
				let maxValue = 0;
				_this.info.data.pay_area.map((item) => {
					if(item.value > maxValue) maxValue = item.value;
				});
				
				// 通过邮政编码，将后端返回的城市数组转换为插件的数据
				let seriesData = [];
				_this.info.data.pay_area.map((item) => {
					_this.info.echart.mapData.features.map((prop) => {
						if(prop.properties.adcode == item.region_code){
							seriesData.push({ name: prop.properties.name, value: item.value });
						}
					});
				});
                let option = {
                    tooltip: {
                        show: true,
						trigger: 'item',
						// enterable: true,
						triggerOn: "click",
						alwaysShowContent: true,
						className: 'diy_tooltip',
						formatter: function(params,ticket) {
							let adcode = "";
							_this.info.echart.mapData.features.map((item) => {
								if(item.properties.name === params.name){
									adcode = item.properties.adcode;
								}
							});
                            setTimeout(() => _this.getTooltipData(adcode), 50);
							return `
								<div class="tooltip_main flex">
									<div class="load">
										<div class="loadLayer">
											<span></span>
											<span></span>
											<span></span>
											<span></span>
										</div>
									</div>
								</div>
							`
						},
						position: function (point, params, dom, rect, size) {
							let x = 0; // x坐标位置
							let y = 0; // y坐标位置
							// 当前鼠标位置
							let pointX = point[0];
							let pointY = point[1];
							// 提示框大小
							let boxWidth = size.contentSize[0];
							let boxHeight = size.contentSize[1];
							
							// boxWidth > pointX 说明鼠标左边放不下提示框
							if (boxWidth > pointX) {
								x = pointX + 10;
							} else { // 左边放的下
								x = pointX - boxWidth - 10;
							}
			
							// boxHeight > pointY 说明鼠标上边放不下提示框
							if (boxHeight > pointY) {
								y = 5;
							} else { // 上边放得下
								y = pointY - boxHeight;
							}
							return [x, y];
						},
                    },
                    geo: {
                        type: "map",
                        map: _this.info.echart.cityCode,
                        roam: true,
                        selectedMode: false, // 添加这个属性完美解决问题
                        zoom: _this.info.echart.cityCode ? 1.4 : 0.81,
                        center: _this.info.echart.cityCode ? [105, 40] : [0, 50],
                        regions: [
                            {
                                name: "南海诸岛",
                                itemStyle: {
                                    // 隐藏地图
                                    normal: {
                                        opacity: 0, // 为 0 时不绘制该图形
                                    }
                                },
                                label: {
                                    show: false // 隐藏文字
                                }
                            }
                        ],
                        showLegendSymbol: false, // 存在legend时显示
                        label: {
                            normal: {
                                show: !true,
                                fontSize: 9,
                                textStyle: {
                                    color: "rgba(255,255,255,0.45)"
                                }
                            }
                        },
                        itemStyle: {
                            areaColor: "rgba(255,255,255,0.78)",
                            borderColor: "#09524f",
                            borderWidth: 1,
                        },
                        select: {
                            label: {
                                textStyle: {
                                    color: "#000"
                                }
                            },
                            itemStyle: {
                                areaColor: "#fec64b",
                            },
                        },
                        emphasis: {
                            label: {
                                textStyle: {
                                    color: "#000"
                                }
                            },
                            itemStyle: {
                                areaColor: "#fec64b",
                            },
                        }
                    },
                    visualMap: { // 视觉映射（数据颜色深浅）
                        type: 'piecewise',
                        itemGap: 30,
                        orient: 'horizontal',
                        color: ['#1b5b51', '#309283', 'rgb(116, 187, 151)', 'rgb(157, 210, 183)', 'rgb(197, 231, 214)'],
                        min: 0, // 可根据数据范围自行配置
                        max: maxValue, // 可根据数据范围自行配置
                        left: 'center', // 可根据位置自行配置
                        bottom: '10px', // 可根据位置自行配置
                        calculable: true, // 如果允许用户动态调整数据范围，请设置为true
                        textStyle: { color: "rgba(255,255,255,0.7)" }
                    },
                    series: [{type: "map",geoIndex: 0,data: seriesData}]
                };
                _this.info.echart.myChart.setOption(option, true);
                _this.info.echart.myChart.dispatchAction({type: "select",seriesIndex: 0,name: "广东省"});
                _this.info.echart.myChart.dispatchAction({type: "showTip",seriesIndex: 0,name: "广东省"});
            },
			
			// 获取新复购
			getReBuyData(){
                let _this = this;
				_this.info.echart.rightLineChart && _this.info.echart.rightLineChart.dispose();
				_this.info.echart.rightLineChart = null;
				_this.app.ajax({
					url: "/admin/BigData/fourteen_total",
					data: { type: _this.info.reBuyType },
					success(res){
						_this.info.echart.rightLineChart = {};
						_this.$nextTick(() => {
							echarts.init(document.querySelector(".rightLineChart")).dispose(); // 销毁实例
							_this.info.echart.rightLineChart = echarts.init(document.querySelector(".rightLineChart"));
							
							// 新复购趋势图
							let rightLineOption = {
							    tooltip: { trigger: 'axis' },
							    legend: {align: 'left',left: '0px',type: 'plain',top: '7px',textStyle: {color: 'rgba(255,255,255,0.55)',fontSize: 11,},itemGap: 25,itemWidth: 18,},
							    grid: {top: '20%',left: '4%',right: '4%',bottom: '15%'},
							    xAxis: [
							        {
							            type: 'category',
							            boundaryGap: false,
							            axisLine: {show: !true},
							            axisLabel: {textStyle: {color: 'rgba(255,255,255,0.55)',padding: 10,fontSize: 12,},formatter: function (data) {return data;}},
							            splitLine: {show: !true},
							            axisTick: {show: false},
							            data: res.data.fourteen_hour
							        }
							    ],
							    yAxis: [{min: 0,splitLine: {show: !true},axisLine: {show: !true},axisLabel: {show: !true}}],
							    series: [
							        {
							            name: '新购',
							            type: 'line',
							            symbol: 'circle',
							            showAllSymbol: true,
							            symbolSize: 0,
							            smooth: !true,
							            label: {
							                normal: {
							                    show: true,
							                    position: "top",
							                    formatter: function (params) {
							                        // return `${params.value}%`;
							                    },
							                    fontSize: 10,
							                    color: "rgba(255,255,255,0.6)",
							                },
							            },
							            lineStyle: {normal: {width: 2,color: 'rgba(72,188,169,1)'},borderColor: 'rgba(0,0,0,.4)'},
							            itemStyle: {color: 'rgba(72,188,169,1)'},
							            tooltip: {show: true},
							            areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(72,188,169,1)'},{offset: 1,color: 'rgba(72,188,169,0)'}],false)}},
							            data: res.data.fourteen_data.map((item) => {
											return item.new_purchase
										}),
							        },
							        {
							            name: '复购',
							            type: 'line',
							            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
							            showAllSymbol: true,
							            symbolSize: 0,
							            smooth: !true,
							            label: {
							                normal: {
							                    show: true,
							                    position: "top",
							                    formatter: function (params) {
							                        // return `${params.value}%`;
							                    },
							                    fontSize: 10,
							                    color: "rgba(255,255,255,0.6)",
							                },
							            },
							            lineStyle: {normal: {width: 2,color: 'rgba(254,198,75,1)'}},
							            itemStyle: {color: 'rgba(254,198,75,1)'},
							            tooltip: {show: true,},
							            areaStyle: {normal: {color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(254,198,75,1)'},{offset: 1,color: 'rgba(254,198,75,0)'}],false),},},
							            data: res.data.fourteen_data.map((item) => {
											return item.repurchase
										}),
							        }
							    ],
							}
							_this.info.echart.rightLineChart.setOption(rightLineOption, true);
						});
					},
				});
			},
			
            // 加载tooltip里面的后端数据
			getTooltipData(cityCode){
				let _this = this;
                let dom = document.querySelector(`.tooltip_main`);
                if(dom){
					_this.app.ajax({
						url: "/admin/BigData/area_detail",
						data: {
							region_code: cityCode,
							time: _this.info.filterTime.join(","),
						},
						success(res){
							dom.innerHTML = `
							    <div class="toolClose el-icon-close" onclick="closeTooltips()"></div>
							    <div class="toolTitle">${res.data.name}地区</div>
							    <div class="toolNum flex">
							        <div class="item flex">
							            <div class="numFlex flex">
							                <b>${_this.app.castNum(res.data.money_total)}</b>
							                <span>元</span>
							            </div>
							            <div class="numText">今日总流水</div>
							        </div>
							        <div class="item flex">
							            <div class="numFlex flex">
							                <b>${_this.app.castNum(res.data.order_total)}</b>
							                <span>笔</span>
							            </div>
							            <div class="numText">今日单量</div>
							        </div>
							        <div class="item flex">
							            <div class="numFlex flex">
							                <b>${_this.app.castNum(res.data.register_total)}</b>
							                <span>人</span>
							            </div>
							            <div class="numText">今日注册</div>
							        </div>
							    </div>
							    <div class="toolEcharts"></div>
							`;
							setTimeout(() => _this.initTooltipEchart(res.data), 0);
						}
					});
                }
			},

            // 关闭tooltip
			closeTooltips(){
				let geo = this.info.echart.mapData.features;
				for(let i = 0; i < geo.length ;i++){
					this.info.echart.myChart.dispatchAction({
						type: "unselect",
						seriesIndex: 0,
						dataIndex: Number(i)
					});
					this.info.echart.myChart.dispatchAction({
						type: "downplay",
						seriesIndex: 0,
						dataIndex: Number(i)
					});
				}
				if(document.querySelector(".diy_tooltip")){
					document.querySelector(".diy_tooltip").style.display = 'none';
				}
			},
			
			// 初始化tooltip里面的小图表
			initTooltipEchart(data){
				let _this = this;
				if(!document.querySelector(".toolEcharts")){
					return;
				}
				_this.info.echart.toolEcharts = echarts.init(document.querySelector(".toolEcharts"));
				_this.info.echart.toolEcharts.setOption({
					tooltip: {trigger: 'axis'},
                    legend: {align: 'left',left: '0px',type: 'plain',top: '7px',textStyle: {color: 'rgba(255,255,255,0.55)',fontSize: 11},itemGap: 25,itemWidth: 18,},
                    grid: {top: '30%',left: '4%',right: '4%',bottom: '20%'},
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLine: {show: !true},
                            axisLabel: {textStyle: {color: 'rgba(255,255,255,0.55)',padding: 10,fontSize: 12,},formatter: function (data) {return data;}},
                            splitLine: {show: !true},
                            axisTick: {show: false},
                            data: data.fourteen_hour
						},
                    ],
                    yAxis: [{min: 0,splitLine: {show: !true},axisLine: {show: !true},axisLabel: {show: !true}}],
                    series: [
                        {
                            name: '新购金额',
                            type: 'line',
                            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                            showAllSymbol: true,
                            symbolSize: 0,
                            smooth: !true,
                            label: {
                                normal: {
                                    show: true,
                                    position: "top",
                                    formatter: function (params) {
                                        // return `${params.value}%`;
                                    },
                                    fontSize: 10,
                                    color: "rgba(255,255,255,0.6)",
                                },
                            },
                            lineStyle: {
                                normal: {
                                    width: 2,
                                    color: 'rgba(72,188,169,1)', // 线条颜色
                                },
                                borderColor: 'rgba(0,0,0,.4)',
                            },
                            itemStyle: {
                                color: 'rgba(72,188,169,1)',
                            },
                            tooltip: {
                                show: true,
                            },
                            areaStyle: {
                                //区域填充样式
                                normal: {
                                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                    color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(72,188,169,1)',},{offset: 1,color: 'rgba(72,188,169,0)',},],false),
                                },
                            },
                            data: data.fourteen_data.map((item) => {return item.new_purchase}),
                        },
                        {
                            name: '复购金额',
                            type: 'line',
                            symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                            showAllSymbol: true,
                            symbolSize: 0,
                            smooth: !true,
                            label: {
                                normal: {
                                    show: true,
                                    position: "top",
                                    formatter: function (params) {
                                        // return `${params.value}%`;
                                    },
                                    fontSize: 10,
                                    color: "rgba(255,255,255,0.6)",
                                },
                            },
                            lineStyle: {
                                normal: {
                                    width: 2,
                                    color: 'rgba(254,198,75,1)', // 线条颜色
                                },
                            },
                            itemStyle: {
                                color: 'rgba(254,198,75,1)',
                            },
                            tooltip: {
                                show: true,
                            },
                            areaStyle: {
                                //区域填充样式
                                normal: {
                                    //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                    color: new echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: 'rgba(254,198,75,1)',},{offset: 1,color: 'rgba(254,198,75,0)',},],false),
                                },
                            },
                            data: data.fourteen_data.map((item) => {return item.repurchase}),
                        }
                    ],
				});
			},
			
        },
        mounted() {
            let _this = this;
            _this.getMapData();
			_this.getReBuyData();

			// 定时器
			_this.info.nowTimer = setInterval(() => {
				let weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
				let week = weekArray[new Date().getDay()];//注意此处必须是先new一个Date
				document.querySelector(".head .right p").innerHTML = this.app.toTime("","YYYY-MM-DD hh:mm:ss") + "（星期" + week + "）、";
			}, 1000);

            // 由于tooltip是后来追加的html元素，不能直接使用vue事件，因此这里给它中转一下。
			window.closeTooltips = function(e){
				_this.closeTooltips(e);
			};
        },
		beforeDestroy(){
			window.closeTooltips = undefined;
			clearInterval(this.info.nowTimer);
		}
    }
</script>

<style lang="scss" scoped>
    .dataDiv {
        background: radial-gradient(circle, #303637, #04191a, #04191a);
        flex-direction: column;
        position:relative;
        .head {
            height: 70px;
            background: url("/static/img/dataHead.jpg")no-repeat left center;
            background-size: cover;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            flex-direction: row;
            align-items: center;
            padding: 0 30px;
            justify-content: space-between;
            position: relative;
            z-index: 2;
            .left {
                flex-direction: row;
                align-items: center;
                .logo{
                    width: 280px;
					cursor: pointer;
                }
                .resh{
                    width: 23px;
                    margin-left:30px;
                    cursor: pointer;
                    &:hover{
                        opacity: 0.8;
                    }
                }
                
            }
            .right {
                color: rgba(255, 255, 255, 0.7);
                font-size: 14px;
				flex-direction: row;
				align-items: center;
				p{
					color: rgba(255, 255, 255, 0.7);
					font-size: 14px;
				}
                span {
                    color: #FFF;
                    background: rgba(255, 255, 255, 0.06);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    font-size: 13px;
                    line-height: 26px;
                    padding: 0 11px;
                    margin-left: 7px;
                    display: inline-block;
                    vertical-align: middle;
                    margin-top: -2px;
                    transition: 0.2s all;
                    cursor: pointer;
					border-radius: 80px;
                    &:hover {
                        opacity: 0.8;
                    }
                    i {
						font-size: 10px;
                        margin-left: 6px;
                        font-style: normal;
                    }
                }
            }
        }
        .main {
            flex: 1;
            height: 0;
            padding: 16px;
            flex-direction: row;
            align-items: center;
            .commonDataTitle {
                background: url("/static/img/s3.png")no-repeat left center;
                background-size: contain;
                color: #FFF;
                font-size: 14px;
                height: 40px;
                line-height: 34px;
                padding-left: 35px;
            }
            .commonSmallTitle {
                flex-direction: row;
                align-items: center;
                b {
                    width: 0;
                    height: 0;
                    border-left: 8px solid #31bcaa;
                    border-top: 6px solid transparent;
                    border-bottom: 6px solid transparent;
                }
                span {
                    color: rgba(255, 255, 255, 0.8);
                    margin-left: 10px;
                    font-size: 13px;
                }
            }
            .table_head {
                flex-direction: row;
                align-items: center;
                padding: 0 12px;
                margin-top: 5px;
                .item {
                    font-size: 13px;
                    color: #72c5af;
                    line-height: 30px;
                }
            }
            .table_body {
                height: 0;
                flex: 1;
                margin-top: 6px;
                .swiper {
                    height: 100%;
                    margin: 0;
                    .body_item {
                        flex-direction: row;
                        align-items: center;
                        height: 48px;
                        padding: 0 12px;
                        &:nth-child(2n) {
                            background: rgba(42, 123, 109, 0.15);
                        }
                        .item {
                            line-height: 48px;
                            color: rgba(255, 255, 255, 0.8);
                            font-size: 11px;
                            img {
                                width: 13px;
                                height: 13px;
                                border-radius: 1px;
                                vertical-align: middle;
                                display: inline-block;
                                margin-top: -2px;
                                margin-right: 4px;
                            }
                            * {
                                color: rgba(255, 255, 255, 0.8);
                                font-size: 11px;
                            }
                        }
                    }
                }
            }
            .left {
                width: 365px;
                background: rgba(255, 255, 255, 0.06);
                border: 1px solid rgba(255, 255, 255, 0.09);
				backdrop-filter: blur(20px);
                height: 100%;
                border-radius: 3px;
                position: relative;
                z-index: 2;
                padding: 24px 18px 18px 18px;
                flex-direction: column;
                .pieDiv {
                    flex-direction: row;
                    align-items: center;
                    margin-top: 27px;
                    .leftPie {
                        flex: 1;
                        width: 0;
                        height: 160px;
                    }
                    .rabit {
                        margin-left: 15px;
                        width: 120px;
                        .item {
                            flex-direction: row;
                            align-items: center;
                            background: linear-gradient(to right, rgba(255, 255, 255, 0.1), transparent);
                            height: 36px;
                            margin-bottom: 15px;
                            padding-left: 13px;
                            font-size: 13px;
                            color: rgba(255, 255, 255, 0.8);
                            &:nth-child(2) {
                                margin-bottom: 0;
                            }
                            b {
                                width: 7px;
                                height: 7px;
                                margin-right: 9px;
                                background: red;
                            }
                            span {}
                            i {
                                font-style: normal;
                                flex: 1;
                                width: 0;
                            }
                        }
                    }
                }
                .progress {
                    .proDiv {
                        background: #48bca9;
                        height: 8px;
                        border-radius: 10px;
                        margin-top: 18px;
                        .active {
                            width: 30%;
                            background: #fec64b;
                            height: 100%;
                            border-radius: 10px;
                        }
                    }
                    .tar {
                        flex-direction: row;
                        align-items: center;
                        margin-top: 3px;
                        .item {
                            flex-direction: row;
                            align-items: center;
                            height: 36px;
                            font-size: 13px;
                            color: rgba(255, 255, 255, 0.8);
                            margin-right: 20px;
                            b {
                                width: 7px;
                                height: 7px;
                                margin-right: 9px;
                                background: red;
                            }
                            span {}
                            i {
                                font-style: normal;
                            }
                        }
                    }
                }
                &::v-deep .swiper-wrapper {
                    transition-timing-function: linear !important;
                }
            }
            .center {
                flex: 1;
                height: 100%;
                width: 0;
                padding: 18px 18px 0 18px;
                .centerNum {
                    flex-direction: row;
                    align-items: center;
                    position: relative;
                    z-index: 2;
                    justify-content: center;
                    .numLeft {
                        background: url("/static/img/s1.png")no-repeat center center;
                        background-size: contain;
                        height: 120px;
                        width: 98px;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        padding-right: 30px;
                        img {
                            width: 27px;
                        }
                        span {
                            color: #FFF;
                            font-size: 11px;
                            opacity: 0.7;
                            line-height: 22px;
                            margin-top: 5px;
                        }
                    }
                    .numRight {
                        background: url("/static/img/s2.png")no-repeat center center;
                        background-size: contain;
                        height: 120px;
                        width: 670px;
                        margin-left: -35px;
                        flex-direction: row;
                        align-items: center;
                        .item {
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            flex: 1;
                            width: 0;
                            .numFlex {
                                flex-direction: row;
                                align-items: center;
                                justify-content: center;
                                line-height: 40px;
                                b {
                                    font-size: 23px;
                                    color: #fff;
                                }
                                span {
                                    font-size: 13px;
                                    margin-left: 4px;
                                    color: rgba(255, 255, 255, 0.7);
                                }
                            }
                            .numText {
                                font-size: 13px;
                                line-height: 22px;
                                color: rgba(255, 255, 255, 0.7);
                                i{
                                    display: inline-block;
                                    vertical-align: middle;
                                    margin-top:-2px;
                                    margin-left:8px;
                                    border:1px solid rgba(255,255,255,0.3);
                                    color:rgba(255, 255, 255, 0.7);
                                    line-height:18px;
                                    padding:0 6px;
                                    font-size:11px;
                                    border-radius:3px;
                                    cursor: pointer;
                                    &:hover{
                                        opacity: 0.8;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .right {
                width: 365px;
                background: rgba(255, 255, 255, 0.06);
                border: 1px solid rgba(255, 255, 255, 0.09);
				backdrop-filter: blur(20px);
                height: 100%;
                border-radius: 3px;
                position: relative;
                z-index: 2;
                padding: 24px 18px 18px 18px;
                flex-direction: column;
                .textGroup {
                    padding: 0 10px;
                    margin-top: 15px;
                    .item {
                        flex-direction: row;
                        align-items: center;
                        justify-content: space-between;
                        font-size: 13px;
                        line-height: 25px;
                        margin-bottom: 10px;
                        &:nth-last-child(1) {
                            margin-bottom: 0;
                        }
                        .itemLeft {
                            color: rgba(255, 255, 255, 0.7);
                            flex: 1;
                            width: 0;
                        }
                        .itemRight {
                            color: rgb(254, 198, 75);
                            margin-left: 12px;
                        }
                    }
                }
                .rightLineView{
                    margin-top:3px;
                    position:relative;
                    .dropdownView{
                        position:absolute;
                        top:3px;
                        right:0;
                        z-index:1;
                        .selectSpan{
                            width:72px;
                            text-align: center;
                            color: #FFF;
                            background: rgba(255, 255, 255, 0.06);
                            border: 1px solid rgba(255, 255, 255, 0.2);
                            font-size: 13px;
                            line-height: 23px;
                            padding: 0 11px;
                            vertical-align: middle;
                            border-radius: 80px;
                            transition: 0.2s all;
                            cursor: pointer;
                            display: inline-block;
                            vertical-align: middle;
                            margin-top:-2px;
                            &:hover {
                                opacity: 0.8;
                            }
                            i {
								font-size: 10px;
                                margin-left: 6px;
                                font-style: normal;
                            }
                        }
                    }
                    .rightLineChart {
                        height: 200px;
                    }
                }
            }
        }
        .maps {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
        }
        .showDeData{
            box-shadow: none;
            left:50%;
            margin-left:-150px;
            top:120px;
        }
    }
</style>

<style lang="scss">
    html, body, #app{
		height: 100vh;
		width: 100vw;
		min-width: 1400px;
		min-height: 750px;
		overflow: auto;
        .dataDiv{
            height: 100%;
            width: 100%;
			overflow: hidden;
        }
    }
    .diy_tooltip{
		width:360px;
        background: rgba(0,0,0,0.65)!important;
        border: 1px solid rgba(255,255,255,0.09)!important;
		pointer-events: auto!important;
		padding:18px!important;
		backdrop-filter: blur(20px);
		.tooltip_main{
			width:100%;
			flex-direction: column;
			position:relative;
			.load{
                height:260px;
				position:relative;
				.loadLayer {
					position: absolute;
					top: calc(50% + 5px);
					left: 50%;
					text-align: center;
					transform: translate(-50%, -50%);
					span {
						display: inline-block;
						width: 5px;
						height: 100%;
						border-radius: 4px;
						margin:0 2px;
						animation: loads 1.04s ease infinite;
						background:rgba(255,255,255,0.65);
						&:nth-child(2) {
							animation-delay: 0.13s;
						}
						&:nth-child(3) {
							//animation-delay: 0.26s;
						}
						&:nth-child(4) {
							animation-delay: 0.39s;
						}
					}
					@keyframes loads {
						0%, 100% {
							height: 7px;
						}
						50% {
							height: 20px;
							margin-top: -20px;
							opacity: 0.7;
						}
					}
				}
			}
            .toolClose{
                position:absolute;
                color:rgba(255,255,255,0.6);
                font-size:18px;
                right:0;
                top:3px;
                cursor: pointer;
                &:hover{
                    opacity: .8;
                }
            }
            .toolTitle{
                color:#FFF;
                font-weight:bold;
                font-size:17px;
                line-height:22px;
            }
            .toolNum{
                flex-direction: row;
                align-items: center;
                margin-top:18px;
                padding:10px 0;
                border-top:1px solid rgba(255,255,255,0.1);
                border-bottom:1px solid rgba(255,255,255,0.1);
                .item {
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    flex: 1;
                    width: 0;
                    .numFlex {
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                        line-height: 25px;
                        b {
                            font-size: 16px;
                            color: #fff;
                        }
                        span {
                            font-size: 11px;
                            margin-left: 4px;
                            color: rgba(255, 255, 255, 0.7);
                        }
                    }
                    .numText {
                        font-size: 11px;
                        line-height: 22px;
                        color: rgba(255, 255, 255, 0.7);
                    }
                }
            }
            .toolEcharts{
                height: 150px;
                margin-top:12px;
            }
		}
    }
</style>